<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title> Administracion de Areas </title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 80%;
            }
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }   
            .ui-layout-unit-content{
                overflow:visible !important;
            }
        </style>

    </h:head>
    <br />
    <h:body>
        <p:layout fullPage="true" >  
            <p:layoutUnit position="north" size="100" header="Control de registro de Incidencias" 
                          resizable="false" closable="false" collapsible="false" >  
                <!--Encabezado o Menu Bar que es de Layout -->
                <h:form id="frmMenu">
                    <p:growl id="messages"/>  
                    <p:menubar >   
                        <p:menuitem value="Inicio" url="inicio.xhtml" icon="inicio" />  

                        <p:submenu  label="Administracion" icon="administracion">  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminUsuario}" value="Usuarios" url="administrarUsuarios.xhtml" icon="usuario"/>  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminPerfil}" value="Perfiles" url="administrarPerfiles.xhtml" icon="permisos"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminArea}" value="Areas" url="administrarAreas.xhtml" icon="areas"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCategoria}" value="Categorias" url="administrarCategorias.xhtml" icon="categorias"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCargo}" value="Cargos" url="administrarCargos.xhtml" icon="cargos"/>
                        </p:submenu>  

                      <p:submenu label="Base de Conocimiento" icon="baseConocimiento" 
                                   rendered="#{loginBean.usuario.perfil.adminBaseConocimiento}">  
                            <p:menuitem value="Soluciones" url="administrarBaseConocimiento.xhtml" icon ="solucion"/>   
                        </p:submenu>

                     <p:submenu label="Incidencias" icon="incidencia"  
                                   rendered="#{loginBean.usuario.perfil.adminIncidencias}">
                             <p:menuitem value="Pendientes:" url="IncidenciasxResolver.xhtml" icon="mio"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                            <p:menuitem value="Todas" url="administrarIncidencias.xhtml" icon="problema" 
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/>
                            <p:menuitem value="Asignaciones" url="administrarAsignaciones.xhtml" icon="asociar"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                        </p:submenu> 

                        <p:menuitem value="Contraseña" url="#" icon="candado" />  

                        <p:menuitem value="Salir" url="index.jsf" icon="salir" />  
                    </p:menubar>
                    <!--//Cierra Encabezado o Menu Bar que es de Layout -->
                </h:form> 
            </p:layoutUnit>

            <!--*************************************************************************** -->           
            <!-- Panel central o Contenedor  -->
            <p:layoutUnit position="center" size="1500" style="border-bottom: transparent;
                          border-top: transparent; border-left: transparent; border-right: transparent" >

                <!-- Inicio de scroll panel-->
                <p:scrollPanel style="width:1300px;height:480px" mode="native" > 
                    <h:form>
                        <br/>
                        <!-- Boton para crear un Nueva Categoria-->
                        <p:commandButton value="Adicionar Nuevo usuario a Categoria" 
                                         actionListener="#{categoriaBean.preparInsertar()}" 
                                         oncomplete="dlgNuevo.show();"  image="icon-adicionar_usuario"
                                         rendered="#{loginBean.usuario.perfil.crearCategoria}"/>
                    </h:form><br /><br />

                    <!--mostrar Categorias registradas -->
                    <h:form id="frmAsignaciones">
                        <p:dataTable id="datatable" var="asignaciones" value="#{asignacionesBean.asignaciones}" 
                                     widgetVar="tablaAsignaciones"   emptyMessage="Ninguna categoria registrada" 
                                     paginatorPosition="bottom" paginator="true" rows="5"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15" style="font-size: 12px" >

                            <f:facet name="header">  
                                <p:outputPanel style="alignment-adjust: ">  
                                    <h:outputText value="Search all fields:" />  
                                    <p:inputText id="globalFilter" onkeyup="tablaCategorias.filter()"
                                                 style="width:150px" />  
                                </p:outputPanel>  
                            </f:facet>  

                            <p:column headerText="Codigo" filterBy="#{asignaciones.codAsignacion}"  >  
                                <h:outputText value="#{asignaciones.codAsignacion}" />  
                            </p:column>  
                            <p:column headerText="Atendida actualmente por:" filterBy="#{asignaciones.usuario.nombres}"  >  
                                <h:outputText value="#{asignaciones.usuario.nombres} 
                                              #{asignaciones.usuario.apellidos}"   />  
                            </p:column>
                            <p:column headerText="Categoria" filterBy="#{asignaciones.categoria.nombre}"  >  
                                 <h:outputText value="#{asignaciones.categoria.nombre}"  />  
                            </p:column>

                            <p:column style="width:8%; text-align: center " headerText="Config">  
                                <p:commandButton title="Editar" update=":frmAsignaciones" oncomplete="dlgEditar.show();"
                                                 actionListener="#{asignacionesBean.prepararActualizar(asignaciones.codAsignacion)}" 
                                                 image="editar" rendered="#{loginBean.usuario.perfil.editarCategoria}"/>  
                                <p:commandButton  title="Eliminar" update=":frmEliminar"
                                                  actionListener="#{asignacionesBean.prepararEliminar(asignaciones.codAsignacion)}"
                                                  oncomplete="dlgEliminar.show();" image="eliminar"
                                                  rendered="#{loginBean.usuario.perfil.eliminarCategoria}"/>  
                            </p:column>     
                        </p:dataTable>  
                    </h:form>
                    <!--//cierre form para mostrar categorias registradas -->    

                </p:scrollPanel>
            </p:layoutUnit>
            <!-- END Layout central-->



            <!--Layout bottom -->
            <p:layoutUnit position="south" size="70" header="" resizable="false" closable="false" collapsible="false" 
                          style="text-align:center; font-size: 12px;" > 
                <h:outputText value="Sistema Control de Reporte de Incidencias" /> <br /> 
                <h:outputText value="Corporaci&oacute;n universitaria Minuto de Dios" />  <br />
                <h:outputText value="Desarrollado por: Yinna Martinez y Diego Babativa - Licencia GPL" /><br />
            </p:layoutUnit>

            <p:layoutUnit position="west" size="200" header="Bienvenido" resizable="true"
                          closable="true" collapsible="true"> 
                <h:form>  
                    <p:growl id="growl" showDetail="true" />  
                    <h:panelGrid columns="1" cellpadding="10">  
                        <p:graphicImage value="resources/fotos/#{loginBean.usuario.foto}" width="170"/>
                        <h:outputLabel style=" font-size: 14px; color: blue" 
                                       value="Usuario: #{loginBean.usuario.login}"/>

                        <h:outputText style="font: bold; font-size: 12px" value="
                                      E-mail: #{loginBean.usuario.EMail}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Area: #{loginBean.usuario.area.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Perfil: #{loginBean.usuario.perfil.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Cargo: #{loginBean.usuario.cargo.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Movil: #{loginBean.usuario.numCelular}"/>

                    </h:panelGrid>   
                </h:form>  
            </p:layoutUnit> 
        </p:layout>
        
         <!--Formulario para ingresar Nuevas Asignaciones  -->

        <h:form id="frmNuevo" enctype="multipart/form-data" style="font-size: 13px">
            <p:dialog header="Nueva Asignación" widgetVar="dlgNuevo" resizable="false" id="dlgNuevo" modal="true" >
                <p:growl id="growlNuevo" showDetail="true" sticky="true"  /> <!-- Este es un mensaje modal para 
                  confirmar la creación del area.-->

                <h:panelGrid id="pgNuevo" columns="2" cellpadding="4" >  
                   
                    <h:outputText value="Seleccione la Categoria" style="padding-left: 20px"/>  
                    <h:outputText value="Seleccione el Técnico a Asociar" style="padding-left: -10px"/> 
                    
                    
                     <p:selectOneMenu value="#{asignacionesBean.categoriaPorAsignar}" required="true" 
                                      requiredMessage="Debe Seleccionar una Categoria Para Asociar">
                        <f:selectItem itemLabel=" - Seleccionar un Categoria - "  itemValue=""  />
                        <f:selectItems value="#{categoriaBean.categorias}"  var="categoria"
                                       itemLabel="#{categoria.nombre}" 
                                       itemValue="#{categoria.codCategoria}"/>
                     </p:selectOneMenu>  
                    
                    <p:selectOneMenu value="#{asignacionesBean.usuarioAsignado}" required="true" 
                                      requiredMessage="Debe seleccionar un Técnico a Asociar" >
                        <f:selectItem itemLabel=" - Seleccionar un Técnico - "  itemValue=""  />
                        <f:selectItems value="#{usuarioBean.buscarTecnicos()}"  var="Usuario"
                                       itemLabel="#{Usuario.nombres} #{Usuario.apellidos}-->#{Usuario.cargo.nombre}" 
                                       itemValue="#{Usuario.codUsuario}"/>
                     </p:selectOneMenu>
                   
                       
                </h:panelGrid>
                <p:separator  />
                <p:commandButton value="Asignar" update=":frmAsignaciones:datatable, growlNuevo, dlgNuevo" oncomplete="dlgNuevo.hide()" 
                                 image="icon-guardar" actionListener="#{asignacionesBean.insertar()}" />  
                <p:commandButton value="&nbsp;Cancelar" update=":frmAsignaciones" oncomplete="dlgNuevo.hide()" 
                                 image="icon-cancelar" />  
            </p:dialog>  
        </h:form>
        <!--//Cierre ingresar nuevas Areas  -->

        <!--Form  eliminar Asignaciones -->
        <h:form id="frmEliminar">  
            <p:growl id="growlEliminar" sticky="true" />  
            <p:confirmDialog id="dlgEliminar" message="¿Est&aacute; seguro de eliminar la Categoria ?"  
                             header="Eliminar Usuario" severity="alert" widgetVar="dlgEliminar"  >  
                <p:commandButton value="&nbsp;Eliminar" update=":frmAsignaciones:datatable, growlEliminar, dlgEliminar" oncomplete="dlgEliminar.hide()" 
                                 actionListener="#{categoriaBean.eliminar()}" image="icon-guardar"  />  
                <p:commandButton value="&nbsp;cancelar" update=":frmAsignaciones:datatable" oncomplete="dlgEliminar.hide()" 
                                 image="icon-cancelar" />   
            </p:confirmDialog>  
        </h:form>   
        <!--End Form  eliminar Categoria  -->

        <!-- Editar una Asignaciòn -->
         <h:form id="frmEditar" enctype="multipart/form-data" style="font-size: 13px">
            <p:dialog header="Editar Asignacion" widgetVar="dlgEditar" resizable="false" id="dlgEditar" modal="true" >
                <p:growl id="growlEditar" showDetail="true" sticky="true"  /> <!-- Este es un mensaje modal para 
                  confirmar la creación del area.-->

                <h:panelGrid id="pgEditar" columns="2" cellpadding="4" >  
                   
                    <h:outputText value="Seleccione la Categoria" style="padding-left: 20px"/>  
                    <h:outputText value="Seleccione el Técnico a Asociar" style="padding-left: -10px"/> 
                    
                    
                     <p:selectOneMenu value="#{asignacionesBean.categoriaPorAsignar}" required="true" 
                                      requiredMessage="Debe Seleccionar una Categoria Para Asociar">
                        <f:selectItem itemLabel="#{asignacionesBean.asignacion.categoria.nombre}" 
                                      itemValue="#{asignacionesBean.asignacion.categoria.codCategoria}"  />
                        <f:selectItems value="#{categoriaBean.categorias}"  var="categoria"
                                       itemLabel="#{categoria.nombre}" 
                                       itemValue="#{categoria.codCategoria}"/>
                     </p:selectOneMenu>  
                    
                    <p:selectOneMenu value="#{asignacionesBean.usuarioAsignado}" required="true" 
                                      requiredMessage="Debe seleccionar un Técnico a Asociar" >
                        <f:selectItem itemLabel="#{asignacionesBean.asignacion.usuario.nombres}" 
                                      itemValue="#{asignacionesBean.asignacion.usuario.codUsuario}"  />
                        <f:selectItems value="#{usuarioBean.buscarTecnicos()}"  var="Usuario"
                                       itemLabel="#{Usuario.nombres} #{Usuario.apellidos}-->#{Usuario.cargo.nombre}" 
                                       itemValue="#{Usuario.codUsuario}"/>
                     </p:selectOneMenu>
                   
                       
                </h:panelGrid>
                <p:separator  />
                <p:commandButton value="Actualizar" update=":frmAsignaciones:datatable, growlEditar, dlgEditar" oncomplete="dlgEditar.hide()" 
                                 image="icon-guardar" actionListener="#{asignacionesBean.actualizar()}" />  
                <p:commandButton value="&nbsp;Cancelar" update=":frmAsignaciones" oncomplete="dlgEditar.hide()" 
                                 image="icon-cancelar" />  
            </p:dialog>  
        </h:form>
       
        
    </h:body>        
</html>  
